<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 科幻管理系统</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        .password-strength {
            margin-top: 5px;
            font-size: 0.8rem;
        }
        .weak { color: var(--danger-color); }
        .medium { color: var(--warning-color); }
        .strong { color: var(--success-color); }
    </style>
</head>
<body>
    <div class="auth-container">
        <div class="floating-particles"></div>
        
        <div class="auth-card">
            <div class="auth-header">
                <h1>创建账户</h1>
                <p>加入科幻管理系统</p>
            </div>
            
            <div th:if="${errorMessage}" class="alert alert-danger" th:text="${errorMessage}"></div>
            
            <form th:action="@{/register}" method="post" th:object="${user}" id="registerForm">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" th:field="*{username}" class="form-control" required autofocus placeholder="选择一个用户名">
                </div>
                
                <div class="form-group">
                    <label for="email">电子邮箱</label>
                    <input type="email" id="email" th:field="*{email}" class="form-control" required placeholder="您的电子邮箱地址">
                </div>
                
                <div class="form-group">
                    <label for="fullName">姓名</label>
                    <input type="text" id="fullName" th:field="*{fullName}" class="form-control" placeholder="您的真实姓名">
                </div>
                
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" th:field="*{password}" class="form-control" required placeholder="创建一个强密码">
                    <div id="password-strength" class="password-strength"></div>
                </div>
                
                <div class="form-group">
                    <label for="confirmPassword">确认密码</label>
                    <input type="password" id="confirmPassword" th:field="*{confirmPassword}" class="form-control" required placeholder="再次输入您的密码">
                </div>
                
                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-block">
                        <i class="fas fa-user-plus"></i> 注册
                    </button>
                </div>
            </form>
            
            <div class="auth-footer">
                <p>已有账户? <a th:href="@{/login}">立即登录</a></p>
            </div>
        </div>
    </div>
    
    <script th:src="@{/js/script.js}"></script>
</body>
</html> 